<template>
    <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="100">

        <FormItem label="值班项名称" prop="watchlists_name.zh">
            <Input v-model="form.watchlists_name.zh" placeholder="输入值班项名称"></Input>
        </FormItem>
        
        <FormItem label="父级">
            <Select v-model="form.pid">
                <Option v-for="item in parentList" :value="item.value" :key="item.value" placeholder="请选择上级">{{ item.label }}</Option>
            </Select>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit('form')" :loading="butload">{{ condition?'修改':'添加' }}</Button>
        </FormItem>

    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        return {
            butload: false,
            form:{
                watchlists_name: {
                    zh: null,
                    en: null,
                    mn: null,
                },
                sort: '0',
                pid: null
            },
            addurl:'api/watchlists/v1/securityclass/add',
            editurl: 'api/watchlists/v1/securityclass/edit/' + this.condition,
            selUrl: 'api/watchlists/v1/securityclass/info/' + this.condition,

            ruleValidate: {
                'watchlists_name.zh': [
                    { required: true, message: '请输入值班项名称', trigger: 'blur' }
                ]
            },

            parentList: [],
            parenturl: 'api/watchlists/v1/securityclass/list'
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.butload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            this.$http.post(this.addurl, this.form).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            this.$http.put(this.editurl, this.form).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        queryData () {
            this.$http.get(this.parenturl).then(val=>{
                this.handelData (val.data, false)
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 处理数据
         * 
         ************************************************************/
        handelData (data, label) {
            data.forEach(el => {
                let obj = {
                    label: label ? `${label} - ${el.watchlists_name.zh}` : `${el.watchlists_name.zh}`,
                    value: el.watchlists_id,
                }
                if (el.childs.length) this.handelData (el.childs, obj.label)
                this.parentList.push (obj)
            })
        },
        
        /************************************************************
         * 
         * 单条查询
         * 
         ************************************************************/
        selData(){
            this.$http.get(this.selUrl).then(val=>{
                this.form.watchlists_name = val.data.watchlists_name
                this.form.pid = val.data.pid
            }).catch(err => {
            })
        }
    },
    created () {
        if (this.condition) this.selData ()
        this.queryData ()
    },
};
</script>